/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    box-sizing: border-box;
    block-size: calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
    z-index: 1;
    white-space: nowrap;
    color: var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-tabs-color)));
    transition: color var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) ease-out;
    cursor: pointer;
    outline: none;
    -webkit-text-decoration: none;
    text-decoration: none;
    position: relative;
}

::slotted([slot="icon"]) {
    block-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size));
    inline-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size));
    margin-block-start: var(--mod-tabs-top-to-icon, var(--spectrum-tabs-top-to-icon));
}

[name="icon"] + #item-label {
    margin-inline-start: var(--mod-tabs-icon-to-text, var(--spectrum-tabs-icon-to-text));
}

:host:before {
    content: "";
    box-sizing: border-box;
    block-size: calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));
    inline-size: calc(100% + var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * 2);
    border: var(--mod-tabs-focus-indicator-width, var(--spectrum-tabs-focus-indicator-width)) solid transparent;
    border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-tabs-focus-indicator-border-radius));
    pointer-events: none;
    position: absolute;
    inset-block-start: calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2);
    inset-inline-start: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
    inset-inline-end: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
}

@media (hover: hover) {
    :host(:hover) {
        color: var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover)));
    }
}

:host([selected]) {
    color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)));
}

:host([disabled]) {
    cursor: default;
    color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)));
}

:host([disabled]) #item-label {
    cursor: default;
}

:host(:focus-visible) {
    color: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)));
}

:host(:focus-visible):before {
    border-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color)));
}

#item-label {
    cursor: pointer;
    vertical-align: top;
    font-family: var(--mod-tabs-font-family, var(--spectrum-tabs-font-family));
    font-style: var(--mod-tabs-font-style, var(--spectrum-tabs-font-style));
    font-size: var(--mod-tabs-font-size, var(--spectrum-tabs-font-size));
    font-weight: var(--mod-tabs-font-weight, var(--spectrum-tabs-font-weight));
    line-height: var(--mod-tabs-line-height, var(--spectrum-tabs-line-height));
    margin-block-start: var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text));
    margin-block-end: var(--mod-tabs-bottom-to-text, var(--spectrum-tabs-bottom-to-text));
    -webkit-text-decoration: none;
    text-decoration: none;
    display: inline-block;
}

#item-label:empty {
    display: none;
}
